<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <title><%=htmlWebpackPlugin.options.title %></title>
    <style>
        #main {
            width: 800px;
            height: 630px;
            position: relative;
            border: 1px solid #e1e1e1;
            margin: 30px auto;
        }

        #tabs {
            position: relative;
            background: #f1f1f1;
            border-bottom: 1px solid #e1e1e1;
        }

        #contents {
            position: relative;
        }
    </style>
</head>

<body>
    <button id="openNew">openNew</button>
    <button id="openNew1">openNew1</button>
    <button id="openNew2">openNew2</button>
    <button id="openNew3">openNew3</button>
    <button id="openNew4">openNew4</button>
    <button id="openNew5">openNew5</button>
    <button id="openNew6">openNew6</button>
    <button id="openNew7">openNew7</button>
    <div id="main" class="tabx-flexbox tabx-flex-column">
        <div id="tabs"></div>
        <div id="contents" class="tabx-flex-item"></div>
    </div>

    <script>
        document.getElementById('openNew').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user',
                    title: '管理员',
                    url: '../local.html'
                }
            });
        }
        document.getElementById('openNew1').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user1',
                    title: '管理员1',
                    url: '../local.html',
                    useSubTitle: true
                }
            });
        }
        document.getElementById('openNew2').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user2',
                    title: '管理员2',
                    url: '../local.html',
                    useSubTitle: true
                }
            });
        }
        document.getElementById('openNew3').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user3',
                    title: '管理员3',
                    url: '../local.html',
                    useSubTitle: true
                }
            });
        }
        document.getElementById('openNew4').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user4',
                    title: '管理员4',
                    url: '../local.html',
                    useSubTitle: true
                }
            });
        }
        document.getElementById('openNew5').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user5',
                    title: '管理员5',
                    url: '../local.html',
                    useSubTitle: true
                }
            });
        }
        document.getElementById('openNew6').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'user6',
                    title: '管理员6',
                    url: '../local.html',
                    useSubTitle: true
                }
            });
        }
        document.getElementById('openNew7').onclick = function () {
            tabx.open({
                container: ["#tabs", "#contents"],
                item: {
                    id: 'role',
                    title: '角色管理',
                    url: 'https://www.ithome.com'
                }
            });
        }
    </script>
</body>

</html>